<template>
  <div :class="['art-shop', $ua.isFromPc() ? 'z-web' : 'z-phone']">
    <div class="art-shop-banner">
      <img fit="cover" :src="bannerImg" alt="" />
    </div>
    <div v-if="$ua.isFromPc()" class="vrstadiums-list">
      <LargeText>
        <el-image slot="img" lazy fit="cover" :src="vrstadiumsList.banner?.url" alt="" />
        <div slot="right">
          360VR展厅
        </div>
      </LargeText>
      <ImgTextList
        :dataList="vrstadiumsList.dataList"
        type="vrstadiums"
        :goUrl="goUrl"
        :carryParams="carryParams"
        class="art-shop-list"
      />
    </div>
    <div v-if="$ua.isFromPc()" class="vrstadiums-list">
      <LargeText>
        <el-image fit="cover" lazy slot="img" :src="threeModelList.banner?.url" alt="" />
        <div :slot="'left'">
          3D模型展厅
        </div>
      </LargeText>
      <ImgTextList
        :dataList="threeModelList.dataList"
        type="3dmodle"
        :goUrl="goUrl"
        :carryParams="carryParams"
        class="art-shop-list"
      />
    </div>
    <div v-if="$ua.isFromPc()" class="vrstadiums-list">
      <LargeText>
        <el-image fit="cover" slot="img" :src="boutiqueList.banner?.url" alt="" />
        <div :slot="'right'">
          精品展厅
        </div>
      </LargeText>
      <ImgTextList
        :dataList="boutiqueList.dataList"
        :goUrl="goUrl"
        type="showHall"
        :carryParams="carryParams"
        class="art-shop-list"
      />
    </div>
    <div v-if="$ua.isFromPc()" class="vrstadiums-list">
      <LargeText>
        <el-image fit="cover" slot="img" :src="artList.banner?.url" alt="" />
        <div :slot="'left'">
          艺术展厅
        </div>
      </LargeText>
      <ImgTextList
        type="artHall"
        :dataList="artList.dataList"
        :goUrl="goUrl"
        :carryParams="carryParams"
        class="art-shop-list"
      />
    </div>
    <div v-else>
      <ul class="menu-list">
        <li :class="['menu', activeMenu === index ? (index <= 1 ? 'active-menu' : 'active-menu active-short-menu') : '']" v-for="(item, index) in menuList" :key="index" @click="handleMenu(item, index)">
          {{ item.label }}
        </li>
      </ul>
      <div class="video-list">
        <div class="video-content" v-for="item in phoneShowData" :key="item.data_id" @click="goDesc(item)">
          <el-image class="img" fit="cover" :src="getImgUrl(listType, item?.data_id, 'title_page')">
            <div slot="error" class="image-slot">
              <img :src="item.title_page" alt="">
            </div>
          </el-image>
          <div class="video-info">
            <div class="video-title">
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="look-more" @click="lookMore" v-if="!$ua.isFromPc() && phoneShowData.length < dataTotal">
          查看更多
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getImgUrl } from '@/utils/downloadFile'
import LargeText from '@/components/slots/largeText.vue'
import ImgTextList from '@/components/imgTextList'
export default {
scrollToTop: true,
name: 'artShop',
  components: {
    LargeText,
    ImgTextList
  },
  data() {
    return {
      menuList: [
        {
          label: '3D模型展厅',
          value: '3dmodle'
        },
        {
          label: '360VR展厅',
          value: 'vrstadiums'
        },
        {
          label: '精品展厅',
          value: 'boutique'
        },
        {
          label: '艺术展厅',
          value: 'artShopList'
        }
        // '精品展厅',
        // '推荐展厅'
      ],
      bannerList: {},
      goUrl: '',
      carryParams: {},
      phoneShowData: [],
      vrstadiumsList: {
        dataList: [],
        banner: []
      },
      boutiqueList: {
        dataList: [],
        banner: []
      },
      artList: {
        dataList: [],
        banner: []
      },
      page_num: 1,
      page_count: 4,
      dataTotal: -1,
      threeModelList: {
        dataList: [],
        banner: [],
      },
      listType: '3dmodle',
      bannerImg: '',
      activeMenu: 0,
      activeItem: {},
      boutiqueData: [],
      artData: []
      // bannerList: []
    }
  },
  mounted() {
    this.goUrl = '/artShop/desc'
    this.carryParams = {}
    if (this.$ua.isFromPc()) {
      this.vrstadiums()
      this.threeModle()
      this.getBoutiqueList()
      this.getArtList()
    } else {
      this.handleMenu(this.menuList[0], 0)
    }
    this.bannerList = this.$store.state.router.router[0].children.filter(item => {
      return item.name === location.pathname.replaceAll('/', '')
    })[0]?.meta?.banner_list[0]
    this.bannerImg = this.bannerList?.url
  },
  methods: {
    getImgUrl,
    // pc端获取vr数据
    vrstadiums() {
      this.$api.vrstadiums({}).then(res => {
        // console.log('vrstadiumsList',res)
        this.vrstadiumsList.dataList = Array.isArray(res.result.item_list) ? res.result.item_list.splice(0, 3) : []
        this.vrstadiumsList.banner = this.$store.state.router.router[0].children.find(item => {
          if (item.name === location.pathname.replaceAll('/', '')) console.log('名字', item)
          return item.name === location.pathname.replaceAll('/', '')
        })?.meta?.vrBanner[0]
        console.log('this.vrstadiumsList.banner', this.vrstadiumsList)
      })
    },
    // pc端获取3D数据
    threeModle() {
      this.$api.threeModle({}).then(res => {
        console.log('threeModle', res)
        this.threeModelList.dataList = Array.isArray(res.result.item_list) ? res.result.item_list.splice(0, 3) : []
        // this.handleMenu(undefined, 0)
        this.threeModelList.banner = this.$store.state.router.router[0].children.find(item => {
          return item.name === location.pathname.replaceAll('/', '')
        })?.meta?.threeBanner[0]
      })
    },
    getBoutiqueList() {
      this.$api.boutique({}).then(res => {
        if (res.status === '$SUCCESS') {
          this.boutiqueList.dataList = Array.isArray(res.result.item_list) ? res.result.item_list.slice(0, 3) : []
          this.boutiqueList.banner = this.$store.state.router.router[0].children.find(item => {
            return item.name === location.pathname.replaceAll('/', '')
          })?.meta?.boutiqueBanner[0]
        }
      })
    },
    getArtList() {
      this.$api.artShopList({}).then(res => {
        if (res.status === '$SUCCESS') {
          this.artList.dataList = Array.isArray(res.result.item_list) ? res.result.item_list.slice(0, 3) : []
          this.artList.banner = this.$store.state.router.router[0].children.find(item => {
            return item.name === location.pathname.replaceAll('/', '')
          })?.meta?.artBanner[0]
        }
      })
    },
    // 进入展厅详情页
    goDesc(data) {
      console.log(data)
      if (this.activeMenu == 2) {
        this.$router.push({
          path: '/artShop/showHall',
          query: {
            data_id: data.data_id
          }
        })
      } else if (this.activeMenu == 3) {
        this.$router.push({
          path: '/artShop/artHall',
          query: {
            data_id: data.data_id
          }
        })
      } else {
        this.$toast.fail('查看展厅详情请到电脑端')
      }
    },
    // 移动端切换菜单
    handleMenu(item, index) {
      this.phoneShowData = []
      this.activeMenu = index
      this.activeItem = item
      this.getDynamic(item, index)
      console.log(this.activeMenu)
      console.log('phoneShowData', this.phoneShowData)
    },
    // 移动端获取数据
    getDynamic(item, index) {
      console.log(item)
      let api = item.value === '3dmodle' ? 'threeModle' : item.value
      const params = {
        page_num: this.page_num,
        page_count: this.page_count
      }
      this.$api[api]({ ...params }).then(res => {
        this.dataTotal = res.result.total_count
        let phoneShowData = Array.isArray(res.result.item_list) ? res.result.item_list : []
        phoneShowData.forEach(ele => {
          this.phoneShowData.push(ele)
        })
        if (item.label == '3D模型展厅') {
          this.listType = '3dmodle'
        } else {
          this.listType = 'vrstadiums'
        }
      })
    },
    lookMore() {
      this.page_num++
      this.getDynamic(this.activeItem)
    }
  }
}
</script>

<style lang="less" scoped>
.art-shop {

  &.z-web {
    padding-bottom: 80px;
    background: #fff;

    .art-shop-list {
      padding: 0 276px;
    }

    .art-shop-banner {
      img {
        width: 100%;
        height: 600px;
        object-fit: cover;
        // height: 600px;
      }
    }
  }

  &.z-phone {
    .art-shop-banner {
      width: 100%;

      img {
        width: 100%;
        height: pxtorem(388);
        object-fit: cover;
      }
    }
    .menu-list {
      text-align: center;
      padding: pxtorem(40) pxtorem(24) 0;

      .menu {
        // width: pxtorem(110);
        display: inline-block;
        font-size: pxtorem(24);
        font-weight: bold;
        color: #898989;
        flex: 25%;
        text-align: center;
        margin-bottom: pxtorem(42);
        margin-right: pxtorem(54);

        &:last-child {
          margin: 0;
        }

        &.active-menu {
          color: #000;
          position: relative;
        }

        &.active-menu::after {
          content: '';
          width: pxtorem(52);
          height: pxtorem(4);
          background-color: #000;
          position: absolute;
          bottom: pxtorem(-6);
          left: pxtorem(35);
        }

        &.active-short-menu::after {
          left: pxtorem(20);
        }
      }
    }

    .video-list {
      padding: 0 pxtorem(24) pxtorem(80);

      .video-content {
        ::v-deep(.el-image) {
          width: pxtorem(150);
          height: pxtorem(200);

          .image-slot {
            img {
              width: pxtorem(150);
              height: pxtorem(200);
              object-fit: cover;
            }
          }
        }

        .video-info {
          display: inline-block;
          vertical-align: top;
          // margin-top: pxtorem(5);
          margin-left: pxtorem(32);

          .video-title {
            font-size: pxtorem(28);
            font-weight: 600;
            color: #000;
            margin-top: pxtorem(5);
          }
        }
      }

      .look-more {
        width: pxtorem(280);
        height: pxtorem(80);
        background: #fff;
        border: 1px solid #999;
        font-size: pxtorem(30);
        font-weight: bold;
        color: #999;
        line-height: pxtorem(80);
        text-align: center;
        margin: pxtorem(48) auto 0;
      }
    }
  }
}
</style>